<template>
  <div class="pageheader">
    <el-page-header @back="$router.back()">
      <template #content>
        <span> {{ info.project.name }} 方案评价 </span>
      </template>
    </el-page-header>
  </div>
  <el-tabs v-model="activeName" type="border-card" class="tabs" >
    <el-tab-pane v-for="(table, index) in tables as any" :key="index" :label="table.tableName" :name="index">
      <el-scrollbar>
        <table border="1" style="width: 100%">
          <th :colspan="50">{{ table.tableName }}表</th>
          <!--                     <tr v-if="table.isArray !== 0">
                        <td :colspan="2">标号及项目名称</td>
                        <td :colspan="basicInfo.consYear">建设期</td>
                        <td :colspan="basicInfo.operYear">运营期</td>
                        <td>合计</td>
                    </tr> -->
          <tr>
            <td style="width: 30px;text-align: left">序号</td>
            <td>项目</td>
            <td>单位</td>
            <template v-if="table.isArray === 0">
              <td>数据</td>
            </template>
            <template v-else>
              <td v-for="(year, index) in dataSheet[table.indicatorMarks[0]]" :key="index">
                <span v-if="index === 0">合计</span>
                <span v-if="index > 0">{{ index - 1 }}</span>
              </td>
            </template>
          </tr>
          <template v-for="(item, index) in table.indicatorMarks" :key="index">
            <tr
                v-if="indicatorDict[item] !== undefined && indicatorDict[item].indicatorName !== '' && indicatorDict[item].indicatorName !== null">
              <td style="text-align: left">
                {{ table.viewMarks[index] }}
              </td>
              <td v-if="indicatorDict[item] !== undefined">
                {{ indicatorDict[item].indicatorName }}
              </td>
              <td v-else>
                {{ item }}
              </td>
              <td>{{ indicatorDict[item].unit }}</td>
              <template v-if="Object.keys(dataSheet).length != 0">
                <td>
                  {{ dataSheet[item][dataSheet[item].length - 1].toFixed(2) }}
                </td>
                <template v-for="(element, index) in dataSheet[item]" :key="index">
                  <td v-if="index !== dataSheet[item].length - 1">
                    <span v-if="typeof element === 'number' && index !== dataSheet[item].length - 1">
                      <span v-if="ifPercentage(indicatorDict[item].unit)">{{
                        toPercentage(element)
                      }}</span>
                      <span v-else>{{ element.toFixed(2) }}</span>
                    </span>
                  </td>
                </template>
              </template>
              <!-- <template v-else>
              <td v-for="(element, index) in dataSheet[item]" :key="index">
                {{ element.toFixed(2) }}
              </td>
            </template> -->
            </tr>
          </template>
        </table>
      </el-scrollbar>
    </el-tab-pane>
     <el-tab-pane label="敏感性分析" name="a">
            <div>
                <div class="chart"></div>
                <div class="chart"></div>
                <div class="chart"></div>
                <div class="chart"></div>
                <div class="chart"></div>
                <div class="chart"></div>
            </div>
        </el-tab-pane> -
  </el-tabs>
</template>
<script lang="ts" setup>
import {ref, reactive, onMounted} from "vue";
import {
  ElMessage,
} from "element-plus";
import * as echarts from "echarts";
import solutionApi from "@/api/equipment/solution";
import dict from "@/api/equipment/dict";
import router from "@/router";

// 初始化项目基本信息

const routename = router.currentRoute.value.name;
const info = {
  project: { id: 0, name: "", type: 1, description: "", createTime: "" },
  solution: {} as any,
};
const proj = window.sessionStorage.getItem("project");
const solu = window.sessionStorage.getItem("solution");
if (proj !== null) {
  info.project = JSON.parse(proj);
} else {
  ElMessage.error("未获取到项目信息！");
}
if (solu === null) {
  ElMessage.error("未获取到方案信息！");
} else {
  info.solution = JSON.parse(solu);
}

// 表单

// tab索引
const activeName = ref(0);

// 页面基本信息
const basicInfo = reactive({
  calcYear: 1,
  consYear: 1,
  operYear: 0,
});

const dataSheet = ref({} as any); // 数据列表
const tables = ref([] as Array<any>);
const indicatorDict = ref({} as any);

// 获取指标表格
const getSheet = () => {
  dict.tablesOut(info.solution.id).then((res) => {
    tables.value = res.data.data;
    getData();
  });
  return;
};
// 获取指标对应的字典
const getIndicator = () => {
  dict.indicators(info.solution.id).then((res) => {
    indicatorDict.value = res.data.data;
    //getAnalyse();
  });
};

const getData = () => {
  //solutionApi.eva(solution.id);
  solutionApi.solutionIndicators(info.solution.id).then((res) => {
    /* for (const key in res.data.data) {
      dataSheet[key] = res.data.data[key];
    } */
    basicInfo.consYear = res.data.data["1.2"][0];
    basicInfo.operYear = res.data.data["1.3"][0];
    basicInfo.calcYear = res.data.data["1.1"][0];
    dataSheet.value = res.data.data;
    getAnalyse()
  });
};

const getAnalyse =() => {
  let config = {
    economicIndicatorMarks: ["17","18","19"],
    fluctuateRates: [-0.2, -0.1, 0.0, 0.1, 0.2],
    toFluctuateMarks: ["1.1.1","1.1.2"],
  };

  solutionApi.analyse(info.solution.id, config, "3").then((res) => {
    let data = res.data.data
    let ECharts = document.getElementsByClassName("chart");
    let i = 0;
    for (var key in data) {
      let EChart = echarts.init(ECharts[i++])
      let config = {
        title: {text: indicatorDict[key].indicatorName},
        tooltip: {},
        xAxis: {
          data: ["80%", "90%", "100%", "110%", "120%",],
        },
        yAxis: {},
        series: [],
      };

      console.log(data[key])
      for (var key2 in data[key]) {
        console.log(data[key][key2])
        let series = {
          name: indicatorDict[key2].indicatorName,
          type: "line",
          data: data[key][key2]
        }
        config.series.push(series)
      }

      console.log(config.series)

      // 设置参数
      EChart.setOption(config);
    }
  })
}
//获取敏感性分析

// 显示格式
const toPercentage = (value: any) => {
  if (value != undefined && value != null) {
    const scale = (Math.round(value * 10000) / 100.0).toFixed(2) + "%";
    return scale;
  }
};
// 判断是否需要百分比显示
const ifPercentage = (unit: string) => {
  if (unit != undefined && unit != null && unit.indexOf("%") !== -1) {
    return true;
  } else {
    return false;
  }
};



//getAnalyse();

const basicInfoSaved = ref(false);
if (routename === "solution_edit") {
  basicInfoSaved.value = true;
}
onMounted(()=>{
  getSheet();
  getIndicator();
})
const test = () => {
  console.log(tables.value);
  console.log(activeName.value);
  console.log(indicatorDict.value);
};
const inputNumberSize = "small" as "small" | "large";
</script>
<style lang="scss" scoped>
.chart {
  display: inline-block;
  height: 550px;
  width: 1350px;
}

.calbtn {
  margin: 20px;
  width: 300px;
}

.tabs>.el-tabs__content {
  width: 100%;
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.tabs {
  margin: 20px;
}

.basicInfoForm {
  width: 100%;

  .input {
    width: 300px;
  }

  td {
    .el-form-item {
      margin: 0;
      padding: 0;

      .el-form-item__content {
        margin: 0;
        text-align: center;
      }
    }
  }
}

/*表格样式*/
table {
  width: 100%;
  background: #ffffff;
  margin: 10px auto;
  border-collapse: collapse;
  border: 1px solid #dcdfe6;
  /*border-collapse:collapse合并内外边距
    (去除表格单元格默认的2个像素内外边距*/
}

th,
td {
  height: 25px;
  line-height: 25px;
  padding: 5px;
  text-align: center;
  border: 1px solid #dcdfe6;
  white-space: nowrap;
  border-collapse: collapse;
  -webkit-transition: all 0.5s, padding 0s;
  transition: all 0.5s, padding 0s;
}

th {
  font-weight: normal;
  border-collapse: collapse;
  background-color: #f0f2f5;
}

tr {
  background: #fff;
  -webkit-transition: all 0.5s, padding 0s;
  transition: all 0.5s, padding 0s;
  border-collapse: collapse;
  border: 1px solid #dcdfe6;
}

tr:hover {
  background: #ecf5ff;
}

td:hover {
  background-color: #d9ecff;
}
</style>
